<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <base href="${basePath}">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <style>
        .required{
            color: red;
            margin: 0 5px;
        }
    </style>
    <style>
        .layui-form-label{
            width: 60px;
        }
    </style>
</head>
<body style="background-color: #eee;padding: 15px">
<div class="layui-container">
    <div class="layui-card">
        <div class="layui-card-body">
        <span class="layui-breadcrumb">
          <a href="javascript:;">系统管理</a>
          <a href="javascript:;">用户管理</a>
          <a><cite>用户列表</cite></a>
        </span>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" id="searchForm" lay-filter="searchForm">
                <div class="layui-form-item layui-inline">
                    <label for="username" class="layui-form-label">用户名</label>
                    <div class="layui-form-inline">
                        <input class="layui-input" type="text" name="username" id="username" placeholder="完全匹配">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label for="nickname" class="layui-form-label">昵称</label>
                    <div class="layui-form-inline">
                        <input class="layui-input" type="text" name="nickname" id="nickname" placeholder="模糊匹配">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label for="phone" class="layui-form-label">手机号</label>
                    <div class="layui-form-inline">
                        <input class="layui-input" type="text" name="phone" id="phone" placeholder="完全匹配">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label for="roleId" class="layui-form-label">角色</label>
                    <div class="layui-form-inline">
                        <select name="roleId" id="roleId">
                            <option value="">[选择角色]</option>
                            <c:forEach items="${roleList}" var="role">
                                <option value="${role.id}">${role.roleName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label for="status" class="layui-form-label">状态</label>
                    <div class="layui-form-inline">
                        <select name="status" id="status">
                            <option value="">[选择状态]</option>
                            <option value="1">可用</option>
                            <option value="2">禁用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <div class="layui-form-inline">
                        <button class="layui-btn" lay-submit lay-filter="search" >查询</button>
                        <button class="layui-btn" type="button" id="clear">清空</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table lay-filter="dataTable" id="dataTable"></table>
        </div>
    </div>
</div>
</body>
<script>
    /*声明了两个全局变量 form 和 table，这两个变量后续会用来存储 Layui 的表单和表格模块。*/
    var form,table;
    /*这个方法的作用是：把 param: "list" 和 field 里的参数合并，然后重新加载 id 为 dataTable 的表格，并且将页码重置为第一页。*/
    function searchForm(field={}) {
        table.reload('dataTable',{
            where:{
                param:"list",
                ...field
            },
            page: {
                curr:1
            }
        })
    }
    $(function () {
        layui.use(function () {

            /*加载 Layui 的表单和表格模块，并且把它们赋值给之前声明的全局变量*/
            form = layui.form;
            table = layui.table;

            /*监听表单提交--数据筛选*/
            form.on("submit(search)",function ({field}) {
                searchForm(field);
                return false;
            });

            /*监听清除按钮*/
            $("#clear").click(function () {
                /*重置 id 为 searchForm 的表单，然后调用 searchForm 函数重新加载表格数据。*/
                $("#searchForm")[0].reset();
                searchForm();
            });

            /*渲染table表格*/
            table.render({
                /*指定渲染的元素，id为dataTable*/
                elem:"#dataTable",
                /*请求地址*/
                url:"userinfo",
                /*请求携带的参数*/
                where:{
                    param:"list",
                },

                /*改变默认的参数*/
                request:{
                    pageName:"page",
                    limitName:"pageSize",
                },

                /*表格头部工具栏*/
                toolbar:"#tableTemplet",
                /*开启分页功能*/
                page:true,
                /*设置每页显示条数，默认为10*/
                limit:5,
                /*limits数组中的值一定要包含limit的值,最好是让limit的值在数组的第一项*/
                /*设置可切换的条数列表*/
                limits:[5,10,20,50,100],

                /*parseData:对服务器返回的数据进行解析和处理。*/
                parseData(res){
                    let code =0;
                    if (res.code !== 200){
                        code = res.code
                    }

                    return{
                        code,
                        msg:res.msg,
                        count:res.data.count,
                        data:res.data.list
                    }
                },
                /*数据内容设置*/
                cols:[[
                    /*定义表格的列，包括列的字段名*/
                    {type:"checkbox",field: "left"},
                    {field:"id",title:"编号"},
                    {field:"username",title:"用户名"},
                    {field:"nickname",title:"昵称",edit:true},
                    {field:"phone",title:"手机号",edit: true},
                    {field:"role",title:"角色名"},
                    {field:"departmentId",title:"部门"},
                    {field: "status",title: "状态",templet: "#statusTemplet"},
                    {field:"avatar",title:"头像",templet: "#imageTemplet"},
                    {title:"操作",templet:"#optTemplet",field: "right"}
                ]]
            });
            /*监听表格内按钮点击*/
            /*监听 id 为 dataTable 的表格内按钮的点击事件，依据按钮的 event 值执行不同的操作*/
            /*监听表格内按钮点击*/
            table.on("tool(dataTable)",function ({event,data}) {
                switch (event) {
                    case "update":
                        sessionStorage.setItem("dataId",data.id)
                        layer.open({
                            type:2,
                            title:"修改用户",
                            /*页面大小*/
                            area:["400px","350px"],
                            /*跳转地址*/
                            content:"userinfo?param=edit"
                        })
                        break;
                    case "delete":
                        /*弹窗*/
                        layer.confirm('确实删除编号【'+data.id+'】的数据吗？',{icon:3,title:"询问"},function (index) {
                            /*执行操作*/
                            $.ajax({
                                /*询问地址*/
                                url: "userinfo",
                                method:"post",
                                data:{
                                    /*执行的操作*/
                                    param: "delete",
                                    /*传递要删除的id*/
                                    id:data.id
                                },
                                dataType:"json",
                                success(res) {
                                    if (res.code===200){
                                        layer.msg("删除成功!",{icon:6})
                                        table.reload('dataTable');
                                    }else {
                                        layer.alert(msg,{icon: 5});
                                    }
                                }
                            })
                            layer.close(index);
                        })
                        break;
                    case "image":
                        layer.photos({
                            photos: {
                                title:data.name,
                                data:[{
                                    src:data.src
                                }]
                            }
                        });
                        break;
                    case "status":
                        let {id,status} = data;
                        let confirmHtml = '<span style="color: red">禁用</span>';
                        let updateStatus = 2;
                        if (status === 2){
                            let confirmHtml = '<span style="color: green">可用</span>'
                            updateStatus = 1;
                        }
                        layer.confirm('确定更新编号【'+id+'】的状态为'+confirmHtml+'吗？',{icon:3,title:"更改状态"},function (index) {
                            $.ajax({
                                url:"userinfo",
                                data:{
                                    id,
                                    status:updateStatus,
                                    param:"update",
                                },
                                method: "post",
                                dataType: "json",
                                success({code, msg}) {
                                    if (code === 200){
                                        layer.msg("状态更新成功！",{icon:6});
                                        table.reload('dataTable');
                                    }else {
                                        layer.alert(msg,{icon:5});
                                    }
                                }
                            });
                            layer.close(index)
                        })
                        break;
                    default:
                        console.log("点击异常")
                        break;
                }
            })
            /*监听表头按钮点击*/
            table.on("toolbar(dataTable)",function ({event}) {
                switch (event) {
                    case "add":
                        layer.open({
                            type:2,
                            title:"添加用户",
                            area:["400px","350px"],
                            /*跳转地址*/
                            content:"userinfo?param=edit"
                        })
                        break;
                    default:
                        layer.alert("按钮点击异常！",{icon:4});
                        break;
                }
            })
            /*监听行内编辑*/
            table.on("edit(dataTable)",function (obj) {
                let value = obj.value;/*修改后的值*/
                let oldValue = obj.oldValue;/*修改前的值*/
                let id = obj.data.id;/*当前数据id*/
                if (value === oldValue){
                    return;
                }
                let field = obj.field;

                $.ajax({
                    url:"userinfo",
                    data:{
                        param:"update",
                        [field]:value,
                        id
                    },
                    method:"post",
                    dataType:"json",
                    success(res){
                        if (res.code === 200){
                            layer.msg('更新成功',{icon:6});
                        }else {
                            layer.msg(res.msg,{icon:5});
                        }
                    }
                })
            })
        })
    })
</script>
<script type="text/html" id="imageTemplet">
    <button type="button" lay-event="image" class="layui-btn layui-btn-sm">查看图片</button>
</script>
<script type="text/html" id="optTemplet">
    <button type="button" lay-event="update" class="layui-btn layui-btn-sm">修改</button>
    <button type="button" lay-event="delete" class="layui-btn layui-btn-sm">删除</button>
</script>
<script type="text/html" id="tableTemplet">
    <button type="button" lay-event="add" class="layui-btn layui-btn-sm">添加</button>
</script>
<script type="text/html" id="statusTemplet">
    {{# if(d.status === 1){ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm layui-bg-blue">可用</button>
    {{# }else{ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm layui-bg-red">禁用</button>
    {{# } }}
</script>
</html>
